<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="./images/死侍.svg" type="image/x-icon">
  <title>小案例集</title>
  <style>
    * {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }

    body {
      background-color: #242424;

    }

    .title {
      margin-top: 10px;
      color: #fff;
      text-align: center;
      padding-bottom: 2px;
    }

    .title img {
      height: 42px;
      vertical-align: bottom;
    }

    .search {
      height: 40px;
      /* background-color: aqua; */
      text-align: center;
      line-height: 40px;
      margin: 50px;
    }

    .search input {
      width: 350px;
      height: 100%;
      border: 0;
      font-size: 20px;
      padding: 0 10px;
      background-color: #eee;
    }

    .search span {
      display: inline-block;
      width: 100px;
      height: 100%;
      background-color: #eee;
      transform: translateY(-1px);
      cursor: pointer;
    }

    ul {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      margin: 0 150px;
    }

    .case .content {
      width: 345px;
      height: 70px;
      text-align: center;
      line-height: 70px;
      margin: 0 15px 40px;
      color: #fff;
      background-color: chartreuse;
      list-style: none;
    }
  </style>
</head>


<body>
  <h1 class="title">
    <img src="./images/死侍.svg">
    小案例集
  </h1>

  <div class="search">
    <input type="text">
    <span>搜 索</span>
  </div>

  <div class="case"></div>
  <script>
    const content = document.querySelector('.case')
    const lists = [
      { list: './case/移动平行四边形.html' },
      { list: './case/拖拽.html' },
      { list: './case/element主页图片效果.html' },
      { list: './case/圆环进度条.html' },
      { list: './case/极客 001 官网案例.html' },
      { list: './case/SVG + CSS动态霓虹灯文字.html' },
      { list: './case/奇趣头像.html' },
    ]

    const newList = lists.map((item) => ({
      ...item,
      name: item.list.substring(item.list.lastIndexOf('/') + 1, item.list.lastIndexOf('.'))
    }))


    const data = (lists) => {
      console.log(lists);
      if (document.querySelector('.case>ul') !== null) content.innerHTML = ''
      const ul = document.createElement('ul')
      lists.forEach((item, index) => {
        const li = document.createElement('li')
        li.classList.add('content')
        const a = document.createElement('a')

        console.log(117, item);
        if (item) {

          const text = item?.name
          a.innerText = text
          a.href = item.list
          li.appendChild(a)
          ul.appendChild(li)
        }
      })
      content.appendChild(ul)
    }

    console.log(127, newList);
    data(newList)


    //  搜索按钮
    const search = document.querySelector('.search>span')
    search.addEventListener('click', () => {

      const inp = document.querySelector('.search>input')
      // let value = inp.value.trim()
      let value = encodeURIComponent(inp.value.trim())
      console.log(value);

      // encodeURIComponent(value)

      let reg = RegExp(`${value}`)
      console.log(reg);

      data(newList.map(item => reg.test(encodeURIComponent(item.name)) ? item : null))
    })
  </script>
</body>

</html>